<template>
  <div>
    <div class="model"></div>
    <div class="login">
      <div class="l-title">
        <h3>登录
          <i class="_3ENM2xDN"
             @click="close">×</i>
        </h3>
      </div>
      <div class="content">
        <div class="wx"
             v-show="isMobile==1">
          <img src="@/assets/image/login-wx.png"
               alt="">
          <button @click="isMobile=2">选择其他方式登录</button>
        </div>
        <div class="mobile"
             v-show="isMobile==2">
          <div class="m-left">
            <img src="@/assets/image/login-mobile2.png"
                 alt=""
                 width="224"
                 height="120">
            <button class="log"
                    @click="isMobile=3">手机号登录</button>
            <button class="sin">注册</button>
          </div>
          <div class="m-right">
            <img src="@/assets/image/login-mobile.png"
                 alt=""
                 width="187"
                 height="222">
          </div>
        </div>
        <div class="mobile-login"
             v-show="isMobile==3">
          <div class="phone">
            <el-input placeholder="请输入手机号"
                      v-model.trim="phone">
              <template slot="prepend">
                <select name="">
                  <option value="">+86</option>
                </select>
              </template>
            </el-input>
          </div>
          <div class="code">
            <input type="text"
                   placeholder="请输入短信验证码"
                   v-model="code">
            <button @click="requestCode(phone,'login')"
                    :disabled="time!=60"
                    :class="{disabled:time!=60}">{{codeText}}</button>
          </div>
          <button class="dologin"
                  @click="doLogin">登录</button>
        </div>
        <div class="mobile-login mobile-signup "
             v-show="isMobile==4">
          <div class="m-s-top">
            <el-input placeholder="请输入手机号"
                      v-model.trim="s_phone">
              <template slot="prepend">
                <select name="">
                  <option value="">+86</option>
                </select>
              </template>
            </el-input>
          </div>
          <div class="code">
            <input type="text"
                   placeholder="请输入短信验证码"
                   v-model="s_code">
            <button @click="requestCode(s_phone,'signup')"
                    :disabled="s_time!=60"
                    :class="{disabled:s_time!=60}">{{s_codeText}}</button>
          </div>
          <el-input placeholder="请输入昵称"
                    v-model.trim="s_nickName"></el-input>
          <el-input placeholder="请输入密码"
                    v-model.trim="s_password"></el-input>
          <button class="dologin"
                  @click="doSign">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  captcha,
  checkPhone,
  loginByPhone,
  register,
} from '@/assets/js/request'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      isMobile: 3,
      codeText: '获取验证码',
      time: 60,
      phone: '',
      code: '',
      //注册
      s_codeText: '获取验证码',
      s_time: 60,
      s_phone: '',
      s_code: '',
      s_nickName: '',
      s_password: '',
    }
  },
  methods: {
    //关闭登录窗口
    close() {
      this.$store.commit('changeOpenLogin', false)
    },
    //倒计时
    timing(ty) {
      if (ty == 'login') {
        let timer = setInterval(() => {
          this.time--
          this.codeText = this.time + 's'
          if (this.time <= 0) {
            clearInterval(timer)
            this.codeText = '获取验证码'
            this.time = 60
          }
        }, 1000)
      } else if (ty == 'signup') {
        let timer = setInterval(() => {
          this.s_time--
          this.s_codeText = this.s_time + 's'
          if (this.s_time <= 0) {
            clearInterval(timer)
            this.s_codeText = '获取验证码'
            this.time = 60
          }
        }, 1000)
      } else {
        return
      }
    },
    //获取验证码
    requestCode(phone, ty) {
      if (!phone) {
        Message.error('请输入手机号')
      } else {
        captcha({ phone }).then((res) => {
          this.timing(ty)
          Message.success('验证码发送成功')
        })
      }
    },
    //登录验证
    doLogin() {
      if (!this.phone) {
        Message.error('请输入手机号')
      } else if (!this.code) {
        Message.error('请输入验证码')
      } else {
        new Promise((resolve, reject) => {
          checkPhone({ phone: this.phone }).then((res) => {
            //检查手机号是否注册，1注册，-1未注册
            if (res.exist == 1) {
              resolve()
            } else {
              this.isMobile = 4
              Message.info('该手机号未注册')
              reject()
            }
          })
        }).then(() => {
          loginByPhone({ phone: this.phone, code: this.code }).then((res) => {
            console.log(res)
          })
        })
      }
    },
    //注册验证
    doSign() {
      if (!this.s_phone) {
        Message.error('手机号为空')
      } else if (!this.s_code) {
        Message.error('请输入验证码')
      } else if (!this.s_nickName) {
        Message.error('昵称为空')
      } else if (!this.s_password) {
        Message.error('密码为空')
      } else {
        register({
          phone: this.s_phone,
          password: this.s_password,
          nickname: this.s_nickName,
          captcha: this.s_code,
        }).then((res) => {
          console.log(res)
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.model {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
}
.login {
  width: 530px;
  height: 365px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 21;
  .l-title {
    padding: 0 45px 0 18px;
    height: 38px;
    line-height: 38px;
    z-index: 10;
    border-bottom: 1px solid #191919;
    border-radius: 4px 4px 0 0;
    background: #2d2d2d;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    position: relative;
    text-align: left;
    ._3ENM2xDN {
      position: absolute;
      z-index: 20;
      top: 16px;
      right: 20px;
      width: 10px;
      height: 10px;
      overflow: hidden;
      text-indent: -9999px;
      cursor: pointer;
      background: url(../assets/image/login.png) no-repeat;
      background-position: 0 -95px;
    }
  }
  .content {
    width: 528px;
    height: 326px;
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #fff;

    .wx {
      padding: 0 40px;
      width: 299px;
      height: 207px;
      // box-sizing: border-box;
      img {
        width: 439px;
        height: 224px;
      }
      button {
        border: 1px solid #ccc;
        color: #333;
        font-size: 14px;
        background-color: #fff;
        align-items: center;
        cursor: pointer;
        border-radius: 14px;
        line-height: 24px;
        margin-left: 65px;
      }
    }
    .mobile {
      display: flex;
      .m-left {
        width: 300px;
        padding: 0 40px;
        button {
          width: 100%;
          margin: 10px 0;
          border: 0;
          font-size: 12px;
          border-radius: 5px;
          cursor: pointer;
          line-height: 31px;
        }
        .log {
          color: #fff;
          background: url(../assets/image/button2.png) no-repeat 0 9999px;

          background-position: 0 -387px;
        }
        .sin {
          color: #333;
          background: url(../assets/image/button2.png) no-repeat 0 9999px;
          background-position: 0 -59px;
        }
      }
    }
    .mobile-login {
      margin: 0 auto;
      width: 370px;
      height: 152px;
      padding: 10px 50px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      column-gap: 20px;
      .code {
        display: flex;
        justify-content: space-between;
        input {
          width: 193px;
          height: 36px;
          border: 1px solid #ccc;
          outline-style: none;
          padding: 0 20px;
          border-radius: 36px;
        }
        button {
          width: 119px;
          height: 36px;
          border-radius: 36px;
          background: #ff3a3a;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
          border: none;
        }
        .disabled {
          background: #ccc;
          color: #000;
        }
      }
      .dologin {
        width: 100%;
        height: 36px;
        border-radius: 36px;
        color: #fff;
        font-size: 14px;
        background: #ff3a3a;
        cursor: pointer;
        border: none;
      }
    }
    .mobile-signup {
      margin: 0;
      height: 248px;
    }
  }
}
</style>